<template>
  <div class="allocationWIFI">
    <!-- 头像 -->
    <div class="Avatar">
      <el-avatar :size="100" :src="circleUrl" />
      <h1>AI Travel Pocket</h1>
    </div>
    <div class="allocationCard">
      <p>为Pocket配置Wi-Fi</p>
      <p>Pocket将使用所填写的Wi-Fi进行联网</p>
      <el-form ref="allocationForm" :rules="allocationRules" :label-position="'top'" label-width="auto"
        :model="allocationData" style="max-width: 600px">
        <el-form-item label="Wi-Fi 名称" prop="ssid">
          <!-- <el-input v-model="allocationData.name" placeholder="请输入Wi-Fi 名称" /> -->
          <el-select v-model="allocationData.ssid" placeholder="请选择Wi-Fi" style="width:100%">
            <el-option v-for="item in wifilist" :key="item.bssid" :label="item.bssid" :value="item.bssid" />
          </el-select>
        </el-form-item>
        <el-form-item label="Wi-Fi 密码" prop="password">
          <el-input v-model="allocationData.password" placeholder="请输入Wi-Fi密码" />
        </el-form-item>
        <el-form-item>
          <div class="allocationButton">
            <el-button style="width: 90px;height: 36px;">取消</el-button>
            <el-button style="width: 90px;height: 36px;" @click="allocationSubmit(allocationForm)" type="primary"
              :disabled="buttonDisabled">{{
                networkingbutton }}</el-button>

          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import {wifiList, connectWifi, wifiInfo} from '@/api/index'
import { useSSIDStore } from '@/stores/index'
const router = useRouter()
const circleUrl = ref('')
const allocationData = ref({ ssid: '', password: '' })
const allocationForm = ref(null)
const wifilist = ref([])
//下一步按钮是否禁用
const buttonDisabled = ref(false)
//通过设备id连接 点击确定时为验证中...
const networkingbutton = ref('确定')
//id校验规则
const idValidator = (rule, value, callback) => {
  callback()
  // setTimeout(() => {
  //   router.push('/')
  //   callback()
  //   callback(new Error('密码错误，请重试'))
  // }, 1000)
}
//设备密码校验规则
const allocationRules = ref({
  ssid: [{
    required: true,
    message: '请选择Wi-Fi',
    trigger: 'blur'
  },],
  password: [
    {
      required: true,
      message: '请输入Wi-Fi 密码',
      trigger: 'blur',
    },
    {
      message: '密码至少8位',
      trigger: 'blur',
      min: 8
    },
    {
      validator: idValidator,
      trigger: 'submit'
    },
  ]
})

//提交登录
const allocationSubmit = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      try {
        networkingbutton.value = '验证中...'
        buttonDisabled.value = true
        const data = await connectWifi({ ssid: allocationData.value.ssid, password: allocationData.value.password})
        console.log(data)
        networkingbutton.value = '确定'
        buttonDisabled.value = false
        if (data.code == 200) {
          const { setSsid } = useSSIDStore()
          //存ssid到本地缓存
          setSsid('ssid')
          router.push('/DeviceBinding')
        } else{
          ElMessage.error('密码错误，请重试!')
        }
      } catch (e) {
        console.error('网络出现问题!')
        networkingbutton.value = '确定'
        buttonDisabled.value = false
      }


    }

  })
}
onMounted(async () => {
  try {
    try {
      const wifiData = await wifiInfo()
      console.log(wifiData)
      if (wifiData.code == 200) {
        router.push("/")
      }
    } catch (e) {
    }
    const data = await wifiList()
    wifilist.value = data.data
    console.log(data)
  } catch (e) {
    console.error('网络出现问题!')
  }
});
</script>

<style lang="scss" scoped>
.allocationWIFI {
  display: flex;
  flex-direction: column;
  align-items: center;

  .Avatar {
    width: 100%;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    h1 {
      font-size: 24px;
      font-style: normal;
      font-weight: 600;
      margin-top: 20px;
    }
  }

  .allocationCard {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width: 420px;
    height: 340px;
    border-radius: 8px;
    border: 1px solid #B2B2B2;
    background: #FFF;
    padding: 30px;

    p {
      &:nth-child(1) {
        color: #000;
        font-weight: 600;
        margin-bottom: 8px;
      }

      &:nth-child(2) {
        color: #686868;

        font-family: "Microsoft YaHei";
        font-size: 14px;
        margin-bottom: 24px;
      }
    }

    .allocationButton {
      width: 100%;
      margin-top: 10px;
      display: flex;
      justify-content: end;
      align-self: center;
    }
  }
}
</style>
